<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="dashBoard grid-content ep-bg-purple">
          <el-tag type="success">销售额</el-tag>
          <div class="num">123</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashBoard grid-content ep-bg-purple">
          <el-tag type="danger">用户访问量</el-tag>
          <div class="num">456</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashBoard grid-content ep-bg-purple">
          <el-tag type="success">订单量</el-tag>
          <div class="num">789</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="dashBoard grid-content ep-bg-purple">
          <el-tag type="info">新增用户</el-tag>
          <div class="num">520</div>
        </div>
      </el-col>
    </el-row>
    <!--  -->
    <div  >
    <el-row>
    <el-col :span="12">
      <div ref="chart1" style="height: 400px">
      </div>
    </el-col>
    <el-col :span="12">
      <div ref="chart2" style="height: 400px">
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div style="height:500px;">
          <baidu-map class="map" center="蜀山区政府" :zoom="15" :scroll-wheel-zoom="true">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
          </baidu-map>
          <label>关键词：<input v-model="keyword"></label>
          <label>地区：<input v-model="location"></label>
        </div>
    </el-col>
    </el-row>
  </div>
    
  </div>
</template>

<script setup lang="ts" name="DashBoard">
import { ref, reactive, onMounted ,  } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts'
const route = useRoute()
const router = useRouter()
const fn = (() => {
  // 进入页面让页面刷新一次 因为不刷新的话两个账号登录菜单会有点问题
  // (登录admin没有设置选项，superAdmin有,但是退出登录重新登录superAdmin账号不会显示设置菜单)
    if (window.location.href.indexOf("#reloaded") == -1){
      window.location.href = window.location.href + "#reloaded";
      window.location.reload();
    }
})

// 地图
const location = ref<string>('合肥')
const keyword = ref<string>('')
const pStart = reactive({
  lng: 116.294625,
  lat: 39.961627
})
const pEnd = reactive({
  lng: 116.357474,
  lat: 39.988609
})


// 折线图
const myChart = ref()
const chart1 = ref<any>(null)
  const lineLine = () => {
    const lineChart = echarts.init(chart1.value)
    const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C'
        }
      }
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' ml';
          }
        },
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' °C';
          }
        },
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
    lineChart.setOption(option)
    myChart.value = lineChart
}
// 饼状图
const chart2 = ref<any>(null)
const initLine2 = () => {
      // 饼状图
      const lineChart2 = echarts.init(chart2.value)
      // 调用实例的 setOption方法 设置图表的配置和数据
      const option2 = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 130],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 12
            },
            data: [
              { value: 30, name: '一月' },
              { value: 25, name: '二月' },
              { value: 36, name: '三月' },
              { value: 30, name: '四月' },
              { value: 28, name: '五月' },
              { value: 26, name: '六月' },
              { value: 22, name: '七月' },
              { value: 18, name: '八月' },
              { value: 33, name: '九月' },
              { value: 50, name: '十月' },
              { value: 20, name: '十一月' },
              { value: 38, name: '十二月' }
            ]
          }
        ]
      }
      lineChart2.setOption(option2)
      myChart.value = lineChart2
    }
  

onMounted(() => {
  fn(),
  lineLine(),
  initLine2()
})
</script>

<style scoped lang="scss">
.dashBoard {
  display: flex;
  justify-content: center;
  justify-items: center;
  height: 100px;
  height: 150px;
  background-color: #fff;
  border-radius: 20px;

  .el-tag {
    margin-top: 16px;
    font-size: 16px;
  }

  .num {
    font-size: 26px;
    color: black;
    margin-top: 66px;
    margin-left: -80px !important;
  }
}

.timePiece {
  margin-top: 20px;
  height: 450px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map {
  margin-top: 20px;
  height: 422px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
label{
  color: black;
  margin-right: 10px;
}
</style>